<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.引入 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
    <!-- 中国地图 -->
    <script src="./echarts/china.js"></script>
</head>

<body>
    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        // 3.1 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));

        // 3.2 指定图表的配置项和数据
        let chinaGeoCoordMap =
        {
            "武汉校区": [
                114.3896, 30.6628
            ],
            "义安区": [
                117.812079,
                30.945429
            ],
            "米东区": [
                87.655755,
                43.973579
            ],
            "顺河回族区": [
                114.364875,
                34.800459
            ],
            "龙胜各族自治县": [
                110.011238,
                25.797931
            ],
            "宣威市": [
                104.104497,
                26.219759
            ],
            "南宫市": [
                115.408748,
                37.359264
            ],
            "卡若区": [
                97.180437,
                31.138507
            ],
            "安宁市": [
                102.478494,
                24.919493
            ],
            "永昌县": [
                101.984649,
                38.24317
            ],
            "元江哈尼族彝族傣族自治县": [
                101.998103,
                23.596503
            ],
            "融安县": [
                109.397538,
                25.22455
            ],
            "融水苗族自治县": [
                109.256334,
                25.065934
            ],
            "雨湖区": [
                112.903317,
                27.854705
            ],
            "玄武区": [
                118.797861,
                32.048687
            ],
            "历下区": [
                117.076455,
                36.666412
            ],
            "宿豫区": [
                118.330782,
                33.946822
            ],
            "新平彝族傣族自治县": [
                101.990157,
                24.070051
            ],
            "浈江区": [
                113.611098,
                24.804381
            ],
            "向阳区": [
                130.365346,
                46.80779
            ],
            "淄川区": [
                117.966723,
                36.643452
            ],
            "龙亭区": [
                114.35473,
                34.815784
            ],
            "沙河市": [
                114.503335,
                36.854922
            ],
            "雄关区": [
                98.274891,
                39.783332
            ],
            "康巴什区": [
                109.781327,
                39.608266
            ],
            "金川区": [
                102.194089,
                38.521085
            ],
            "衡山县": [
                112.868268,
                27.230291
            ],
            "管城回族区": [
                113.677548,
                34.7545
            ],
            "卫东区": [
                113.335193,
                33.734707
            ],
            "罗湖区": [
                114.131764,
                22.548171
            ],
            "内乡县": [
                111.849392,
                33.044865
            ],
            "潢川县": [
                115.051808,
                32.131383
            ],
            "平原县": [
                116.434056,
                37.165314
            ],
            "峄城区": [
                117.590816,
                34.773263
            ]
        }


        let chinaDatas = [
            [
                {
                    "name": "义安区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "米东区",
                    "value": 2
                }
            ],
            [
                {
                    "name": "顺河回族区",
                    "value": 3
                }
            ],
            [
                {
                    "name": "龙胜各族自治县",
                    "value": 3
                }
            ],
            [
                {
                    "name": "宣威市",
                    "value": 3
                }
            ],
            [
                {
                    "name": "南宫市",
                    "value": 2
                }
            ],
            [
                {
                    "name": "卡若区",
                    "value": 2
                }
            ],
            [
                {
                    "name": "安宁市",
                    "value": 1
                }
            ],
            [
                {
                    "name": "永昌县",
                    "value": 3
                }
            ],
            [
                {
                    "name": "元江哈尼族彝族傣族自治县",
                    "value": 1
                }
            ],
            [
                {
                    "name": "融安县",
                    "value": 2
                }
            ],
            [
                {
                    "name": "融水苗族自治县",
                    "value": 3
                }
            ],
            [
                {
                    "name": "雨湖区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "玄武区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "历下区",
                    "value": 2
                }
            ],
            [
                {
                    "name": "宿豫区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "新平彝族傣族自治县",
                    "value": 1
                }
            ],
            [
                {
                    "name": "浈江区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "向阳区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "淄川区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "龙亭区",
                    "value": 3
                }
            ],
            [
                {
                    "name": "沙河市",
                    "value": 1
                }
            ],
            [
                {
                    "name": "雄关区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "康巴什区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "金川区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "衡山县",
                    "value": 1
                }
            ],
            [
                {
                    "name": "管城回族区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "卫东区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "罗湖区",
                    "value": 1
                }
            ],
            [
                {
                    "name": "内乡县",
                    "value": 1
                }
            ],
            [
                {
                    "name": "潢川县",
                    "value": 1
                }
            ],
            [
                {
                    "name": "平原县",
                    "value": 1
                }
            ],
            [
                {
                    "name": "峄城区",
                    "value": 1
                }
            ]
        ]

        let planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705';

        let convertData = function (data) {
            let res = [];
            for (let i = 0; i < data.length; i++) {
                let dataItem = data[i];
                let fromCoord = chinaGeoCoordMap[dataItem[0].name];
                let toCoord = [114.3896, 30.6628]; // 目标点经纬度（北京顺义校区）
                if (fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord,
                        value: dataItem[0].value
                    }, {
                        coord: toCoord,
                    }]);
                }
            }
            return res;
        };
        let series = [];
        [['武汉校区', chinaDatas]].forEach(function (item, i) {
            series.push({
                type: 'lines',
                zlevel: 6,
                effect: {
                    show: true,
                    period: 4, //箭头指向速度，值越小速度越快
                    trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'circle', //箭头图标
                    symbolSize: 5, //图标大小
                },
                lineStyle: {
                    normal: {
                        width: 1, //尾迹线条宽度
                        opacity: 1, //尾迹线条透明度
                        curveness: 0.2 //尾迹线条曲直度
                    }
                },
                data: convertData(item[1])
            }, {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: { //涟漪特效
                        period: 4, //动画时间，值越小速度越快
                        brushType: 'stroke', //波纹绘制方式 stroke, fill
                        scale: 4 //波纹圆环最大限制，值越大波纹越大
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right', //显示位置
                            offset: [5, 0], //偏移设置
                            formatter: function (params) {//圆环显示文字
                                return params.data.name;
                            },
                            fontSize: 12
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    symbol: 'circle',
                    symbolSize: function (val) {
                        return 4 + val[2] * 5; //圆环大小
                    },
                    itemStyle: {
                        normal: {
                            show: false,
                            color: '#f00'
                        }
                    },
                    data: item[1].map(function (dataItem) {
                        return {
                            name: dataItem[0].name,
                            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                        };
                    }),
                },
                //被攻击点
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {
                        period: 6,
                        brushType: 'stroke',
                        scale: 4
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            offset: [5, 0],
                            color: 'red', // 目标点文字颜色
                            formatter: '{b}',
                            textStyle: {
                                color: "red"
                            }
                        },
                        emphasis: {
                            show: true,
                            color: "purple", // 目标点鼠标移入的颜色
                        }
                    },
                    symbol: 'pin',
                    symbolSize: 50,
                    data: [{
                        name: item[0],
                        value: chinaGeoCoordMap[item[0]].concat([10]),
                    }],
                }
            );
        });

        let option = {
            title: {
                text: '来京路线 From',
                textStyle: {
                    color: '#6d767e'
                }
            },
            geo: {
                map: 'china',
                zoom: 1.2,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true, //是否允许缩放
                itemStyle: {
                    normal: {
                        // color: 'rgba(51, 69, 89, .5)', //地图背景色
                        // color: '#5a6fc0', //地图背景色
                        // borderColor: '#516a89', //省市边界线00fcff 516a89
                        borderWidth: 1
                    },
                    emphasis: {
                        color: 'rgba(37, 43, 61, .5)' //悬浮背景
                    }
                }
            },
            series: series
        };

        // 3.3使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>